<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<div id="test"></div>

		<!-- 引入react核心库 -->
		<script src="js/react.development.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入react-dom 用于支持react操作dom -->
		<script src="js/react-dom.development.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入babel，用于将jsx转化成js。浏览器只识别js，不识别jsx -->
		<script src="js/17.0.1/babel.min.js" type="text/javascript" charset="utf-8"></script>

		<!-- 此处一定要写babel -->
		<script type="text/babel">
			// 1 创建类式组件
		class MyComponent extends React.Component {//myComponent继承了React.Component类
		// 非受控组件:就是指状态不受react控制的组件
			handleSubmit = (event) => {
				event.preventDefault()//阻止默认事件：点确定后刷新页面
				alert(`名字：${this.username.value},密码：${this.password.value}`)
			}

			render() {
				return (
					<form onSubmit={this.handleSubmit}>
						<input ref={c => this.username = c} type="text" placeholder="请输入账号" name="username" />
						<input ref={c => this.password = c} type="text" placeholder="请输入密码" name="password" />
						<button>提交</button>
					</form>
				)
			}
		}

		// 渲染虚拟DOM到页面
		ReactDOM.render(<MyComponent />, document.getElementById('test'))
	</script>

	</body>

</html>
